<template>
  <view class="page-container">
    <!-- 顶部用户信息 -->
    <view class="user-header">
      <view class="avatar-container">
        <image 
          class="avatar" 
          src="/static/profile/icons8-用户-50 (1).png"
          mode="aspectFill"
          @error="handleImageError"
          @load="handleImageLoad"
        ></image>
      </view>
      <text class="username">{{ userInfo.username }}</text>
      <text class="phone" v-if="userInfo.phone">手机号：{{ userInfo.phone }}</text>
    </view>
    
    <!-- 核心功能菜单 -->
    <view class="menu-list">
      <view class="menu-item" @tap="goToPage('/pages/chat/index')">
        <text class="iconfont icon-assistant"></text>
        <text class="menu-name">智慧助手</text>
        <text class="iconfont icon-right"></text>
      </view>
      
      <view class="menu-item" @tap="goToPage('/pages/farm/list')">
        <text class="iconfont icon-farm"></text>
        <text class="menu-name">我的农场</text>
        <text class="iconfont icon-right"></text>
      </view>
      
      <view class="menu-item" @tap="goToPage('/pages/device/list')">
        <text class="iconfont icon-device"></text>
        <text class="menu-name">我的设备</text>
        <text class="iconfont icon-right"></text>
      </view>
      
      <view class="menu-item" @tap="goToPage('/pages/account/settings')">
        <text class="iconfont icon-settings"></text>
        <text class="menu-name">账户设置</text>
        <text class="iconfont icon-right"></text>
      </view>
      
      <view class="menu-item" @tap="goToPage('/pages/help/index')">
        <text class="iconfont icon-help"></text>
        <text class="menu-name">帮助中心</text>
        <text class="iconfont icon-right"></text>
      </view>
      
      <view class="menu-item" @tap="goToPage('/pages/about/index')">
        <text class="iconfont icon-about"></text>
        <text class="menu-name">关于我们</text>
        <text class="iconfont icon-right"></text>
      </view>
    </view>
    
    <!-- 退出登录 -->
    <view class="logout-button" @tap="logout">
      退出登录
    </view>
  </view>
</template>

<script setup lang="ts">
/// <reference types="@dcloudio/types" />
import { ref, onMounted } from 'vue';

interface UserInfo {
  username: string;
  avatar: string;
  phone: string;
}

// 声明 uni 和 uniCloud 全局变量
declare const uni: any;
declare const uniCloud: any;

// 用户信息
const userInfo = ref<UserInfo>({
  username: '未登录用户',
  avatar: '/static/profile/icons8-用户-50 (1).png',
  phone: ''
});

// 处理图片加载错误
const handleImageError = (e: any) => {
  console.error('图片加载错误:', e.detail);
  uni.showToast({
    title: '头像加载失败',
    icon: 'none'
  });
};

// 处理图片加载成功
const handleImageLoad = (e: any) => {
  console.log('图片加载成功:', e.detail);
};

// 获取用户信息
const getUserInfo = async () => {
  try {
    const storedUserInfo = uni.getStorageSync('userInfo');
    if (storedUserInfo) {
      // 添加类型检查和安全解析
      const userData = typeof storedUserInfo === 'string' 
        ? JSON.parse(storedUserInfo) 
        : storedUserInfo;
      
      // 调用云函数获取用户信息
      const { result } = await uniCloud.callFunction({
        name: 'getUserInfo',
        data: {
          username: userData.username
        }
      });
      
      if (result.code === 200) {
        // 更新用户信息
        userInfo.value = {
          username: result.data.username || '未设置用户名',
          avatar: result.data.avatar || '/static/images/default-avatar.png',
          phone: result.data.phone || ''
        };
      } else {
        uni.showToast({
          title: result.msg,
          icon: 'none'
        });
      }
    }
  } catch (e) {
    console.error('获取用户信息失败:', e);
    uni.showToast({
      title: '获取用户信息失败',
      icon: 'none'
    });
  }
};

// 初始化用户信息
onMounted(() => {
  getUserInfo();
});

// 退出登录
const logout = () => {
  uni.showModal({
    title: '退出登录',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        try {
          // 清除用户信息
          uni.removeStorageSync('token');
          uni.removeStorageSync('userInfo');
          
          // 重置用户信息
          userInfo.value = {
            username: '',
            avatar: '/static/images/default-avatar.png',
            phone: ''
          };
          
          // 跳转到登录页面
          uni.reLaunch({
            url: '/pages/login/login'
          });
        } catch (e) {
          console.error('退出登录失败:', e);
          uni.showToast({
            title: '退出失败，请重试',
            icon: 'none'
          });
        }
      }
    }
  });
};

// 页面导航
const goToPage = (url: string) => {
  uni.navigateTo({ url });
};
</script>

<style>
page {
  background-color: #f5f7fa;
  height: 100%;
}

.page-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
  box-sizing: border-box;
  position: relative;
}

/* 顶部用户信息 */
.user-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 0;
  background-color: #ffffff;
  margin-bottom: 20rpx;
  position: relative;
  z-index: 1;
}

.avatar-container {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  margin-bottom: 20rpx;
  border: 4rpx solid rgba(76, 175, 80, 0.2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.username {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 10rpx;
}

.phone {
  font-size: 24rpx;
  color: #666666;
}

/* 菜单列表 */
.menu-list {
  background-color: #ffffff;
  margin: 0 20rpx 40rpx;
  border-radius: 12rpx;
  overflow: hidden;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 2rpx solid #f5f7fa;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item .iconfont:first-child {
  font-size: 36rpx;
  color: #4CAF50;
  margin-right: 20rpx;
}

.menu-name {
  flex: 1;
  font-size: 28rpx;
  color: #333333;
}

.menu-item .iconfont:last-child {
  font-size: 24rpx;
  color: #cccccc;
}

/* 退出登录按钮 */
.logout-button {
  margin: 40rpx 30rpx;
  height: 88rpx;
  background-color: #ffffff;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #FF5252;
  font-weight: 500;
}

/* 图标样式 */
.iconfont {
  font-family: "iconfont";
}

.icon-assistant:before {
  
  color: #4CAF50;
}
</style>